<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/comm/mytags.jsp" %>
<!DOCTYPE html>
<html  data-dpr="1" style="font-size: 30.7498px;;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>互联网+教育中台</title>
    <link rel="shortcut icon" href="${ctx}/static/img/f_icon.png" type="image/x-icon">
    <link rel="stylesheet" href="${ctx}/static/css/middlebigscreen.css">
<body>

<div id="#app">
    <div class="wlcp-page-dev">
        <div class="header">
            <div class="wlcp-dev-header">
                <div class="header-box">
                    <h2 class="header-title">互联网+教育中台</h2>
                </div>
                <div class="header-btn-box">
                    <ul  class="left-btn"></ul>
                    <ul class="right-btn">
                        <a href="${ctx}/middleground/middle_business_page.action">
                            <li  class="btn"> 组件共享</li>
                        </a>
                        <a href="${ctx}/middleground/middle_science_page.action">
                            <li  class="btn btn-active">技术地图</li>
                        </a>
                        <div class="btn-back" style="visibility: hidden;"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="wlcp-dev-tech">
                <div class="tech-charts-box">
                    <div class="charts-left">
                        <div class="wlcp-base-title">
                            <i class="decor-l" style="width: 3.3rem;"></i>
                            <span class="header-tit">研发人员构成</span>
                            <i class="decor-r" style="width: 3.3rem;"></i>
                        </div>
                        <div class="chart">
                            <span class="sub-tit">岗位构成情况</span>
                            <div class="post-chart-box" style="width: 100%; height: 6rem;">
                                <div class="img">
                                    <div class="label">T1</div>
                                    <div class="label">T2</div>
                                    <div class="label">T3</div>
                                    <div class="label">T4</div>
                                    <div class="label">T5</div>
                                </div>
                                <div class="desc">
                                    <div class="label">
                                        <div class="line"></div>
                                        <div class="info"></div>
                                        <div class="info">461人</div>
                                        <div class="info">43%</div>
                                    </div>
                                    <div class="label">
                                        <div class="line"></div>
                                        <div class="info"></div>
                                        <div class="info">411人</div>
                                        <div class="info">38%</div>
                                    </div>
                                    <div class="label">
                                        <div class="line"></div>
                                        <div class="info"></div>
                                        <div class="info">140人</div>
                                        <div class="info">13%</div>
                                    </div>
                                    <div class="label">
                                        <div class="line"></div>
                                        <div class="info"></div>
                                        <div class="info">51人</div>
                                        <div class="info">5%</div>
                                    </div>
                                    <div class="label">
                                        <div class="line"></div>
                                        <div class="info"></div>
                                        <div class="info">7人</div>
                                        <div class="info">1%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chart">
                            <span class="sub-tit">能力构成情况</span>
                        </div>

                    </div>
                    <div class="charts-center">
                        <div class="wlcp-base-title">
                            <i class="decor-l" style="width: 3.3rem;"></i>
                            <span class="header-tit">核心人员能力地图</span>
                            <i class="decor-r" style="width: 3.3rem;"></i>
                        </div>
                        <div class="detail">详情</div>
                        <div class="bg"></div>
                    </div>
                    <div class="charts-right">
                        <div class="charts-power">
                            <div class="wlcp-base-title">
                                <i class="decor-l" style="width: 3.3rem;"></i>
                                <span class="header-tit">技术能力支撑</span>
                                <i class="decor-r" style="width: 3.3rem;"></i>
                            </div>
                            <div class="dev-power-plate">
                                <div class="power-plate">
                                    <div class="data-content">
                                        <div class="tit">AI</div>
                                        <div class="data">
                                            <span class="num">126027</span>
                                            <span class="unit"></span>
                                            <div class="desc">调用次数</div>
                                        </div>
                                        <div class="data">
                                            <span class="num">10</span>
                                            <span class="unit">个</span>
                                            <div class="desc">接入业务数</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="power-plate">
                                    <div class="data-content">
                                        <div class="tit">区块链</div>
                                        <div class="data" style="margin-right: 50px;">
                                            <span class="num">109160</span>
                                            <span class="unit"></span>
                                            <div class="desc">区块高度</div>
                                        </div>
                                        <div class="data">
                                            <span class="num">4</span>
                                            <span class="unit"></span>
                                            <div class="desc">节点数</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="charts-new-tech">
                            <div class="wlcp-base-title">
                                <i class="decor-l" style="width: 3.3rem;"></i>
                                <span class="header-tit">新技术建设进度</span>
                                <i class="decor-r" style="width: 3.3rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tech-apply-box">
                    <div class="wlcp-base-title">
                        <i class="decor-l" style="width: 6rem;"></i>
                        <span class="header-tit">研发平台应用情况</span>
                        <i class="decor-r" style="width: 6rem;"></i>
                    </div>
                    <div class="dev-tech-apply-box">
                        <div class="card-box">
                            <div class="card type-1">
                                <div class="card-tit">预算评估</div>
                                <div class="num-box">
                                    <span class="num">30</span>
                                    <span>个</span>
                                </div>
                                <div class="num-info">已接入项目数</div>
                                <div class="extra">
                                    <span class="desc">应接入项目数</span>
                                    <span class="connect">-----------</span>
                                    <span class="desc">156</span>
                                </div>
                            </div>
                            <div class="card type-1">
                                <div class="card-tit">需求任务</div>
                                <div class="num-box">
                                    <span class="num">30</span>
                                    <span>个</span>
                                </div>
                                <div class="num-info">已接入项目数</div>
                                <div class="extra">
                                    <span class="desc">应接入项目数</span>
                                    <span class="connect">-----------</span>
                                    <span class="desc">156</span>
                                </div>
                            </div>
                            <div class="card type-1">
                                <div class="card-tit">JDP基础开发平台</div>
                                <div class="num-box">
                                    <span class="num">30</span>
                                    <span>个</span>
                                </div>
                                <div class="num-info">已接入项目数</div>
                                <div class="extra">
                                    <span class="desc">插件安装人数</span>
                                    <span class="connect">-----------</span>
                                    <span class="desc">156</span>
                                </div>
                            </div>
                            <div class="card type-2">
                                <div class="card-tit">自动化测试</div>
                                <div class="card-content">
                                    <div class="num-box">
                                        <span class="num">76</span>
                                        <span>%</span>
                                        <div class="num-info">部门导入率</div>
                                    </div>
                                    <div class="num-box">
                                        <span class="num">42</span>
                                        <span>%</span>
                                        <div class="num-info">项目覆盖率</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card type-3">
                                <div class="card-tit">DevOps</div>
                                <div class="card-content">
                                    <span class="num-info">CI覆盖率</span>
                                    <span class="connect">--------------</span>
                                    <span class="num green">68</span>
                                    <span class="unit green">%</span>
                                </div>
                                <div class="card-content">
                                    <div class="num-info">CD覆盖率</div>
                                    <span class="connect">--------------</span>
                                    <span class="num blue">60</span>
                                    <span class="unit blue">%</span>
                                </div>
                                <div class="card-content">
                                    <div class="num-info">CaaS 接入率</div>
                                    <span class="connect">--------------</span>
                                    <span class="num yellow">50</span>
                                    <span class="unit yellow">%</span>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var $, layer, table, layOpenWin;
    layui.config({
        base: "${ctx}/static/js/"
    }).use(['jquery', 'layer', 'table', 'layOpenWin'], function () {
        $ = layui.$,
            layer = layui.layer,
            layOpenWin = layui.layOpenWin,
            table = layui.table;
        /*图表适应浏览器————————————————————————————————————————————---------------------*/
        window.addEventListener("resize", function () {
            resize();
        });
        resize();

    });
    function resize(){
        // 设计稿宽度
        const designWidth = 1919;
        // 屏幕宽度
        const windowWidth = window.innerWidth;
        // html根元素
        const html = document.documentElement;
        // 计算
        html.style.fontSize = (39.6458/designWidth * windowWidth) + 'px';
    }


</script>
</body>
</html>